<template>
    <div class="template-index-Lu">
      <commpVxeTable
        :key="reCommpVxeTable"
        :conditionBtnRow="true"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
                <template>
                    <a-button class="blue-btn" @click="addFor()">申请</a-button>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template>
                    <a-button class="red-btn" @click="deleteList()">批量删除</a-button>
                </template>
            </vxe-form-item>
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
          <a-form layout="inline">
            <a-form-item>
                <a-button class="blue-btn" @click="reviseClick(row)">办理</a-button>
            </a-form-item>
            <a-form-item>
                <a-popconfirm
                    title="您确定要删除这条申请吗?"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="deleteFor(row)"
                    @cancel="cancel"
                    >
                        <a-button class="red-btn">删除</a-button>
                </a-popconfirm>
            </a-form-item>
          </a-form>
        </template>
      </commpVxeTable>
      <applicationForm ref="applicationFormRef" :linkName="linkName" :stepNum="stepNum" :formData="formData" @success="success"></applicationForm>
    </div>
  </template>
  <script>
  import assessCheckApi from './service/api.js'
  import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
  import applicationForm from './applicationForm'
  import {deleteLgqsFlowJob,queryJobByJobId} from './service/index.js'
  export default {
    components: {
        commpVxeTable,
        applicationForm,
    },
    props:{
        linkName:{
            type:String,
            default:'',
            required:false,
        },
        stepNum:{
            type:String,
            default:'',
            required:false,
        }
    },
    data() {
      return {
        stepNums: 0,
        reCommpVxeTable: '',
        dataTableConfig: {
          api: assessCheckApi.list,
          rowId: 'id',
          urlType: true,
          paramet:{
            fhjmc: this.linkName,
          }
        },
        formItem: [
          {
            label: '拟稿科室',
            model: 'fngks',
          }
        ],
        columnsVxe: [
          {
            type: 'checkbox',
            width: 60,
            fixed: 'left'
          },{
            title: '拟稿人',
            field: 'fngr',
            width: 100,
          },{
            title: '拟稿科室',
            field: 'fngks',
            width: 150,
          },{
            title: '信息名称',
            field: 'fxxmc',
          },{
            title: '发布栏目',
            field: 'ffblm',
          },
          {
            title: '发送时间',
            field: 'ffssj',
          },
          {
            title: '退回意见',
            field: 'fthyj',
          },
          {
            title: '操作',
            field: 'jobid',
            width: 200,
            titleInterval:true,
            slots: {
            // 使用插槽模板渲染
              header:'data1_header',
              default: 'operation_btn',
            },
          }
        ],
        jobidList: [],
        formData: {},
      }
    },
    created(){
      this.stepNums = Number(this.stepNum)
    },
    methods: {
      // 勾选
      checkboxChange(val){
        //console.log('已选择',val)
        this.jobidList = []
        if(val.length){
          val.forEach(item => {
            this.jobidList.push(item.jobid)
          });
        }
      },
      // 搜索
      searchEvent(){
        this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
        }
        //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
        this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
        }
      },
      // 办理
      reviseClick(row){
        //console.log(row)
        this.formData = {
          ...row
        }
        let jobid = row.jobid
        queryJobByJobId({jobid:jobid}).then(res => {
          //console.log(res.result.sqsx)
          this.formData.id = res.result.sqsx.id
        })
        this.$nextTick(_ => {
            this.$refs.applicationFormRef.applicationFormVisible = true
        })
      },
      // 添加申请
      addFor(){
        this.$nextTick(_ => {
            this.$refs.applicationFormRef.applicationFormVisible = true
        })
      },
      // 弹窗提交成功
      success(){
        // 刷新表格 清空id数组
        //console.log('success')
        this.$refs.administrativeOffice.resetEvent()
        this.jobidList = []
      },
      //
      deleteFor(row){
        deleteLgqsFlowJob({jobids:row.jobid}).then(res => {
            //console.log(res)
            if(res.code == 200){
                this.reCommpVxeTable = Date.now()
                this.$message.success(res.message)
            } else {
                this.$message.warning(res.message)
            }
        })
      },
      cancel(e) {
        //console.log(e);
    },
      // 批量删除
      deleteList(){
        var that = this
        if(that.jobidList.length == 0){
          that.$message.warning('请选择删除项目')
        } else {
          that.$confirm({
            title: '您确定要删除这些申请吗?',
            content: '',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              let list = that.jobidList.toString()
              deleteLgqsFlowJob({jobids:list}).then(res => {
                //console.log(res)
                if(res.code == 200){
                  that.reCommpVxeTable = Date.now()
                  that.$message.success(res.message)
                } else {
                  that.$message.warning(res.message)
                }
              })
            },
            onCancel() {
              //console.log('Cancel');
            },
          });
        }
      },
    }
  }
  </script>
<style>
@import url('../../css/oaClass.css');
</style>
